<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码生成器调试页面</title>
    <link rel="stylesheet" href="popup.css">
    <style>
        body {
            margin: 20px;
            background: #f5f5f5;
        }
        .debug-info {
            background: white;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .debug-info h3 {
            color: #333;
            margin-bottom: 10px;
        }
        .status {
            padding: 5px 10px;
            border-radius: 4px;
            margin: 5px 0;
            font-weight: bold;
        }
        .status.success {
            background: #d4edda;
            color: #155724;
        }
        .status.error {
            background: #f8d7da;
            color: #721c24;
        }
        .container {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="debug-info">
        <h3>调试信息</h3>
        <div id="debugStatus"></div>
        <button onclick="runDiagnostics()">运行诊断</button>
    </div>

    <!-- 原始插件界面 -->
    <div class="container">
        <!-- 标题栏 -->
        <div class="header">
            <h1>二维码生成器</h1>
        </div>
        
        <!-- 主要内容区域 -->
        <div class="main-content">
            <!-- 左侧：文本输入区域 -->
            <div class="input-section">
                <h3>输入内容</h3>
                <textarea 
                    id="textInput" 
                    placeholder="请输入要生成二维码的内容...\n支持文本、网址、联系方式等"
                    rows="8"
                ></textarea>
                <div class="input-info">
                    <span id="charCount">0</span> 字符
                </div>
            </div>
            
            <!-- 中间：参数设置区域 -->
            <div class="settings-section">
                <h3>参数设置</h3>
                
                <!-- 尺寸设置 -->
                <div class="setting-item">
                    <label for="sizeInput">尺寸大小:</label>
                    <select id="sizeInput">
                        <option value="150">150x150</option>
                        <option value="200" selected>200x200</option>
                        <option value="250">250x250</option>
                        <option value="300">300x300</option>
                    </select>
                </div>
                
                <!-- 容错级别 -->
                <div class="setting-item">
                    <label for="errorLevel">容错级别:</label>
                    <select id="errorLevel">
                        <option value="L">L (低)</option>
                        <option value="M" selected>M (中)</option>
                        <option value="Q">Q (高)</option>
                        <option value="H">H (最高)</option>
                    </select>
                </div>
                
                <!-- 前景色 -->
                <div class="setting-item">
                    <label for="foregroundColor">前景色:</label>
                    <input type="color" id="foregroundColor" value="#000000">
                </div>
                
                <!-- 背景色 -->
                <div class="setting-item">
                    <label for="backgroundColor">背景色:</label>
                    <input type="color" id="backgroundColor" value="#ffffff">
                </div>
                
                <!-- 重置按钮 -->
                <button id="resetBtn" class="reset-btn">重置参数</button>
            </div>
            
            <!-- 右侧：二维码展示区域 -->
            <div class="qrcode-section">
                <h3>二维码预览</h3>
                <div class="qrcode-container">
                    <canvas id="qrcode" width="200" height="200"></canvas>
                    <div id="placeholder" class="placeholder">
                        <div class="placeholder-icon">📱</div>
                        <p>请在左侧输入内容<br>自动生成二维码</p>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="actions">
                    <button id="downloadBtn" class="download-btn" disabled>
                        📥 下载PNG
                    </button>
                    <button id="copyBtn" class="copy-btn" disabled>
                        📋 复制图片
                    </button>
                </div>
                
                <!-- 二维码信息 -->
                <div id="qrcodeInfo" class="qrcode-info" style="display: none;">
                    <small>尺寸: <span id="infoSize">-</span> | 容错: <span id="infoError">-</span></small>
                </div>
            </div>
        </div>
        
        <!-- 底部信息 -->
        <div class="footer">
            <small>支持文本、网址、邮箱、电话等内容 | 生成的二维码可用于微信、支付宝等扫码</small>
        </div>
    </div>
    
    <script>
        function runDiagnostics() {
            const debugStatus = document.getElementById('debugStatus');
            debugStatus.innerHTML = '';
            
            // 检查DOM元素
            const elements = [
                'textInput', 'sizeInput', 'errorLevel', 'foregroundColor', 
                'backgroundColor', 'qrcode', 'placeholder', 'downloadBtn', 
                'copyBtn', 'resetBtn', 'charCount', 'qrcodeInfo'
            ];
            
            elements.forEach(id => {
                const element = document.getElementById(id);
                const status = document.createElement('div');
                status.className = element ? 'status success' : 'status error';
                status.textContent = `${id}: ${element ? '✓ 找到' : '✗ 未找到'}`;
                debugStatus.appendChild(status);
            });
            
            // 检查QRCode库
            const qrStatus = document.createElement('div');
            qrStatus.className = typeof QRCode !== 'undefined' ? 'status success' : 'status error';
            qrStatus.textContent = `QRCode库: ${typeof QRCode !== 'undefined' ? '✓ 已加载' : '✗ 未加载'}`;
            debugStatus.appendChild(qrStatus);
            
            // 检查CSS样式
            const container = document.querySelector('.container');
            const mainContent = document.querySelector('.main-content');
            const cssStatus = document.createElement('div');
            cssStatus.className = (container && mainContent) ? 'status success' : 'status error';
            cssStatus.textContent = `CSS样式: ${(container && mainContent) ? '✓ 正常' : '✗ 异常'}`;
            debugStatus.appendChild(cssStatus);
        }
        
        // 页面加载后自动运行诊断
        document.addEventListener('DOMContentLoaded', () => {
            runDiagnostics();
        });
    </script>
    
    <!-- 引入二维码生成库 -->
    <script src="libs/qrcode.min.js"></script>
    <!-- 主要逻辑脚本 -->
    <script src="popup.js"></script>
</body>
</html>